 <#include "../common/head.ftl">
  <style>
 #menuu {
            top: 0px;
        }

        #menuu ul li a {
            display: block;
            margin: 5px 0;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
        }
.current1{
color: #0089E9;
font-weight:700;
}
        #menuu ul li a:hover,
        #menuu ul li a.current1 {
            color: #fff;
            background: #0088bb;
        }

        * html, * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
        }

        * html #menuu {
            position: absolute;
            bottom: auto;
            top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
        }
 </style>
   <script type="text/javascript">
        $(function () {

            var nav = $("#menuu"); //得到导航对象

            var win = $(window); //得到窗口对象

            var sc = $(document);//得到document文档对象。

            win.scroll(function () {

                if (sc.scrollTop() >= 300) {

                    nav.addClass("fixednav");


                } else {

                    nav.removeClass("fixednav");
                }
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(window).scroll(function () {
                var items = $("#itemss").find(".am-panel");
                var menuu = $("#menuu");
                var top = $(document).scrollTop();
                var currentId = ""; //滚动条现在所在位置的item id
                items.each(function () {
                    var m = $(this);
                    //注意：m.offset().top代表每一个item的顶部位置
                    if (top > m.offset().top - 100) {
                        currentId = "#" + m.attr("id");
                    } else {
                        return false;
                    }
                });

                var currentLink = menuu.find(".current1");
                if (currentId && currentLink.attr("href") != currentId) {
                    currentLink.removeClass("current1");
                    menuu.find("[href=" + currentId + "]").addClass("current1");
                }
            });
        });
    </script>
    <style>
    	.fixednav{
        	background-color:#FAFAFA !important;
        	position:fixed;
        	top:0px;
        	width:285px;
        	}
        	#menuu{
        	text-align:center;
        	
        	}
    </style>
<div class="content">
    <div class="con_left">
        <div class="con_head">

            <ul class="jlop">
                <li style="border-right:none">
                    <p id="download_total">
                    <#if enterpriseInit ??>${enterpriseInit[0].download_total}<#else>0</#if>
                    </p>
                    <span>剩余下载次数</span>
                </li>
                <li style="border-right:none">
                    <p id="resume_get_total">
                    <#if enterpriseInit ??>${enterpriseInit[0].resume_get_total}<#else>0</#if>
                    </p>
                    <span>当日收到简历份数</span>
                </li>
                <li>
                    <p id="resume_favor_total">
                    <#if enterpriseInit ??>${enterpriseInit[0].resume_favor_total}<#else>0</#if>
                    </p>
                    <span>当日收藏简历份数</span>
                </li>
            </ul>
        </div>
        <div class="tttt" style="position:relative;top:6px;">
            <img src="${base}/resources/images/tttt.png">
            <span style="">填写企业信息 审核通过后即可发布职位</span>
        </div>
        <form name="form" id="form1" action="${base}/enterprise/saveEnterpriseInfo" enctype="multipart/form-data" method="post"  style="clear: both;padding-top: 50px;background-color: #fafafa">
         <ul class="cominfo item" id="itemss" >
        	<#list enterpriseList as en>
            <li  class="am-panel am-panel-default" id="qymc1">
                <p><b class="am-panel-hd">企业名称</b><span style="color: darkgray;">(请输入与企业营业执照一致的全称，审核通过后不可更改)</span></p>
                <#if enterpriseInit ??>
	                    <#if enterpriseInit[0].ent_status=="0">
	                    	<input id="qymc" name="qymc"  placeholder="请输入企业名称并确保与企业营业执照一致" value="${en.company_name }" readonly="readonly">
	                    <#else>
	                    	<input id="qymc" name="qymc"  placeholder="请输入企业名称并确保与企业营业执照一致" value="${en.company_name }" maxlength='30' >
                			<div class="onShow" id="qymcTip"></div>
	                    </#if>
                    </#if>
            </li>
            <li class="am-panel am-panel-default" id="sshy1">
                <p><b class="am-panel-hd">所属行业</b></p>
                <select id="sshy" name="sshy" class="sshy_1"></select>
                <select id="suoshu" name="suoshu"  class="sshy_1"></select>
                <div class="onShow" id="suoshuTip"></div>
            </li>
            <li class="am-panel am-panel-default" id="qyxz1">
                <p><b class="am-panel-hd">企业性质</b></p>
                <select id="qyxz" name="qyxz" data="${en.ent_type }">
                	<option value="">请选择</option>
                    <#if en.ent_type=="国有企业">
                    <option value="0" selected="selected">国有企业</option><#else>
                    <option value="0">国有企业</option></#if>
                    <#if en.ent_type=="有限责任公司"><option value="1" selected="selected">有限责任公司</option>
                    <#else><option value="1">有限责任公司</option></#if>
                    <#if en.ent_type=="股份有限公司"><option value="2" selected="selected">股份有限公司</option>
                    <#else><option value="2">股份有限公司</option></#if>
                    <#if en.ent_type=="中外合资企业"><option value="3" selected="selected">中外合资企业</option>
                    <#else><option value="3">中外合资企业</option></#if>
                    <#if en.ent_type=="私营企业"><option value="4" selected="selected">私营企业</option>
                    <#else><option value="4">私营企业</option></#if>
                    <#if en.ent_type=="外商投资企业"><option value="5" selected="selected">外商投资企业</option>
                    <#else><option value="5">外商投资企业</option></#if>
                    <#if en.ent_type=="集体企业"><option value="6" selected="selected">集体企业</option>
                    <#else><option value="6">集体企业</option></#if>
                </select>
                <div class="onShow" id="qyxzTip"></div>
            </li>
            <li  class="am-panel am-panel-default" id="gzdq1">
                <p><b class="am-panel-hd">工作地区</b></p>
                  <div class="gzdq" id="gzdq">
			        <select class="province" id="province"  name="province">
			        </select>
			        <select class="city" id="city" name="city">
			        </select>
			        <select class="district" id="district" name="district">
			        </select>
			        <br>
			    </div>
                <div class="onShow" id="cityTip"></div>
            </li>
            <li  class="am-panel am-panel-default" id="jtdd1">
                <p><b class="am-panel-hd">具体地点</b></p>
                <input id="didian" name="didian" placeholder="请输入具体地点" value="${en.address}">
                <div class="onShow" id="didianTip"></div>
            </li>
            <li  class="am-panel am-panel-default" id="yyzz1">
               <p><b class="am-panel-hd">营业执照</b><span style="color: darkgray;">(图片大小不超过5M,格式为jpg、png、gif或jpeg)</span></p>
                <div id="preview">
                <#if en.licence_url=="">
                   <img id="imghead" style="width: 100%;height: 100%;border: 0;background-image: url(${base}/resources/images/png.png)">
                <#else>
	                <img id="imghead" src="${en.licence_url}" style="width: 100%;height: 100%;border: 0;background-size:100%;background-repeat:no-repeat;">
                </#if>
                </div>
                <input style="width:230px;padding-left:0px;" class="input_file" id="file1" name="file" type="file" onchange="previewImage(this)" />
                <input id="licence" name="licence" type="hidden" value="${en.licence_url}" />
                <span style="font-size: 12px;color: red;width: 590px;display: block;margin-left:20px;">假如您用的为IE浏览器，上传前请设置：Internet选项--&gt;安全--&gt;自定义级别--&gt;其它--&gt;将文件上载到服务器时包含本地目录路径选项设置为启用状态</span>
                <div class="onShow" id="licenceTip"></div>
            </li>
            <li  class="am-panel am-panel-default" id="gsjj1">
                <p><b class="am-panel-hd">公司简介</b></p>
                <textarea id="gsjj" name="gsjj" rows="3" cols="20" maxlength="1000" >${en.intro}</textarea>
                <div class="onShow" id="gsjjTip"></div>
            </li>
            <li  class="am-panel am-panel-default" id="rsgm1">
                <p class="am-panel-hd">人数规模</p>
                <select id="rsgm" name="rsgm">
                	<#if en.company_size=="请选择"><option value="0" selected="selected">请选择</option>
                    <#else><option value="0">请选择</option></#if>
                    <#if en.company_size=="小于15人"><option value="1" selected="selected">小于15人</option>
                    <#else><option value="1">小于15人</option></#if>
                    <#if en.company_size=="15-49人"><option value="2" selected="selected">15-49人</option>
                    <#else><option value="2">15-49人</option></#if>
                    <#if en.company_size=="50-149人"><option value="3" selected="selected">50-149人</option>
                    <#else><option value="3">50-149人</option></#if>
                    <#if en.company_size=="150-499人"><option value="4" selected="selected">150-499人</option>
                    <#else><option value="4">150-499人</option></#if>
                    <#if en.company_size=="500-2000人"><option value="5" selected="selected">500-2000人</option>
                    <#else><option value="5">500-2000人</option></#if>
                    <#if en.company_size=="2000人以上"><option value="6" selected="selected">2000人以上</option>
                    <#else><option value="6">2000人以上</option></#if>
                </select>
            </li>
            <li  class="am-panel am-panel-default" id="qylogo1">
                <p class="am-panel-hd">企业logo<span style="color: darkgray;">(图片大小不超过5M,格式为jpg、png、gif或jpeg)</span></p>
                <div id="previewd">
                <#if en.logo_url=="">
                    <img id="imgheadd" style="width: 100%;height: 100%;border: 0;background-image: url(${base}/resources/images/png.png)">
                <#else>
                	<img id="imgheadd" src="${en.logo_url}" style="width: 100%;height: 100%;border: 0;background-size:100%;background-repeat:no-repeat;">
                </#if>
                </div>
                <input class="input_file" id="yyzzz" name="yyzzz" type="file" onchange="previewImaged(this)"  />
                <input id="logo" name="logo" type="hidden" value="${en.logo_url}" />
                <span style="font-size: 12px;color: red;width: 590px;display: block;margin-left:20px;">假如您用的为IE浏览器，上传前请设置：Internet选项--&gt;安全--&gt;自定义级别--&gt;其它--&gt;将文件上载到服务器时包含本地目录路径选项设置为启用状态</span>
                <div class="onShow" id="yyzzzTip"></div>
            </li>
            <li  class="am-panel am-panel-default" id="gswz1">
                <p class="am-panel-hd">公司网址</p>
                <input  type="text" id="gswz" name="gswz"  placeholder="请输入公司网址 例如：www.1zhaozhao.com" value="${en.web_site}">
            </li>
            </#list>
            <li class="am-panel am-panel-default" id="lxdh1">
                <p class="am-panel-hd">联系电话座机</p>
                <#if userList[0].contact_no=='null'>
                <input  type="text" id="lxdh" name="lxdh" placeholder="例如：13933902293 或 010－68881111-123">
                <#else>
                <input  type="text" id="lxdh" name="lxdh" placeholder="例如：13933902293 或 010－68881111-123" value="${userList[0].contact_no}">
                </#if>
            </li>
            <li>
                <div class="submt" >
                    <a href="javascript:;" style="" onclick="saveInfo();">提交</a>
                </div>
            </li>
            <li class="fot" style="color: #a6a6a6;font-size: 12px;margin-left: 30px;border:none;">
                <p>企业资料由专人审核，请认真填写！如需要帮助请拨打客服电话：4008-907-977</p>
            </li>
        </ul>
    </form>
    </div>
    <div class="con_right">
        <ul>
            <li style="padding-bottom: 30px;">
                <div style="text-align: center;" class="lou">
                <a class="sclogo">
                	<#if enterpriseInit ??>
	                	<#if enterpriseInit[0].logo_url=="">
	                		<img src="${base}/resources/images/lou.png">
	                	<#else>
	                		<img src="${enterpriseInit[0].logo_url}">
	                	</#if>
                	<#else>
                	<img src="${base}/resources/images/lou.png">
                	</#if>
                	</a>
                    <div class="vv" id="sfsh">
                    <#if enterpriseInit ??>
	                    <#if enterpriseInit[0].ent_status=="0">
	                    	<img src='${base}/resources/images/v.png'>
	                    </#if>
                    </#if>
                    </div>
                    <ul class="comadd">
                        <li><b>公司名称：</b><b id="company_name">
                         <#if enterpriseInit ??>
                         	<#if enterpriseInit[0].company_name!=''&&enterpriseInit[0].company_name!='\"null\"'>
	                         	${enterpriseInit[0].company_name}
	                         <#else>未填写</#if>
                         <#else>未填写</#if>
                        </b></li>
                        <li><b>公司地址：</b><b id="cityzzz">
                         <#if enterpriseInit ??>
	                         <#if enterpriseInit[0].city_id_1!='0'&&enterpriseInit[0].city_id_1!=''>
	                         	${enterpriseInit[0].city_id_1}
		                          <#if enterpriseInit[0].city_id_2!='0'&&enterpriseInit[0].city_id_2!=''>
		                          /${enterpriseInit[0].city_id_2}
			                          <#if enterpriseInit[0].city_id_3!='0'&&enterpriseInit[0].city_id_3!=''>
			                          /${enterpriseInit[0].city_id_3}
									 </#if>
								 </#if>
							<#else>未填写</#if>
                         <#else>未填写</#if>
                        </b></li>
                    </ul>
                </div>
            </li>
            <li style="padding: 10px;color:#0089e9;font-weight: 600;margin-left: 50px">完善企业信息</li>
            <li>
               
                        <ul id="menuu" style="margin: 0px auto;">
                            <li><a href="#qymc1" class="am-active">企业名称</a></li>
                            <li><a href="#sshy1" class="">所属行业</a></li>
                            <li><a href="#qyxz1" class="">企业性质</a></li>
                            <li><a href="#gzdq1" class="">工作地区</a></li>
                            <li><a href="#jtdd1" class="">具体地点</a></li>
                            <li><a href="#yyzz1">营业执照</a></li>
                            <li><a href="#gsjj1">公司简介</a></li>
                            <li><a href="#rsgm1">人数规模</a></li>
                            <li><a href="#qylogo1">企业logo</a></li>
                            <li><a href="#gswz1">公司网址</a></li>
                            <li><a href="#lxdh1">联系电话/座机</a></li>
                            <li><a  style="color: #0089e9" href="${base}/enterprise/chPaw">修改密码</a></li>
                        </ul>
                        <div style="    margin-top: 55px;text-align: center;font-weight: 600;}">
                            <span style="font-size: 15px;">客服电话：4008-907-977</span>
                        </div>
            </li>


        </ul>
    </div>
</div>
 <#include "../common/bottom.ftl">
<script src="${base}/resources/js/jquery-1.4.4.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="${base}/resources/css/validator.css">
<script src="${base}/resources/js/formValidator-4.0.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="${base}/resources/js/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<script src="${base}/resources/js/zepto.js"></script>
<script type="text/javascript">
	$base = "${base}";
    $(document).ready(function(){
        $.formValidator.initConfig({formID:"form1",debug:false,submitOnce:true,
            onError:function(msg,obj,errorlist){
                $("#errorlist").empty();
                $.map(errorlist,function(msg){
                    $("#errorlist").append("<li>" + msg + "</li>")
                });
                layer.alert(msg, {icon: 0,skin: 'layer-ext-moon'});
            },
            submitAfterAjaxPrompt : '有数据正在异步验证，请稍等...'
        });

        $("#qymc").formValidator({onShow:"请填写企业名称",onFocus:"必须填写",onCorrect:"OK",defaultValue:""}).inputValidator({min:1,onError: "必须填写企业名称"});
        $("#suoshu").formValidator({onShow:"选择",onFocus:"选择您的所属行业",onCorrect:"OK",defaultValue:""}).inputValidator({min:1,onError:"请选择所属行业！"});
        $("#qyxz").formValidator({onShow:"选择",onFocus:"选择您的企业性质",onCorrect:"OK",defaultValue:""}).inputValidator({min:1,onError:"请选择企业性质！"});
        $("#city").formValidator({onShow:"选择",onFocus:"选择您所在工作地区",onCorrect:"OK",defaultValue:""}).inputValidator({min:1,onError:"请选择您所在工作地区！"});
        $("#didian").formValidator({onShow:"请填写具体地点",onFocus:"地点必须填写",onCorrect:"OK",defaultValue:""}).inputValidator({min:1,onError: "请填写具体地点了！"});
        $("#gsjj").formValidator({onShow:"请填写公司简介",onFocus:"必须填写",onCorrect:"OK",defaultValue:""}).inputValidator({min:1,onError: "请填写公司简介"});
        //$("#yyzz").formValidator({onShow:"请上传营业执照",onFocus:"必须上传",onCorrect:"OK",defaultValue:""}).inputValidator({min:1,onError: "必须上传"});
         
        city(0,1);
        industryList(0);
        
        //选择省
        $("#province").change(function(){
        	var province_id =$("#province").val();
          	 city(province_id,2);
        });
        
        //选择市
        $("#city").change(function(){
        	var city_id =$("#city").val();
         	 city(city_id,3);
       });
       
    });
	
    //提交
 	function saveInfo(){
 		if(($("#file1").val()==""||$("#file1").val()==null)&&($("#licence").val()==null||$("#licence").val()=="")){
 			layer.alert("必须上传营业执照!", {icon: 0,skin: 'layer-ext-moon'});
 			return false;
 		}
 		$("#form1").submit();
     }
 	
    //地区初始化
 	function city(parent_id,e){
	 var type="province";
	 $.post($base + '/enterprise/cityList',{
		 "parent_id":parent_id
	 },function(data){
			if(data.result>0){
				if((parent_id==0||parent_id=='')&&e=='1'){
					$("#province").empty();
					$("#province").append($("<option value='0'>请选择</option>"));
					$("#city").empty();
					$("#city").append($("<option value='0'>请选择</option>"));
					$("#district").empty();
					$("#district").append($("<option value='0'>请选择</option>"));
				}else if(e=='2'){
					$("#city").empty();
					$("#city").append($("<option value='0'>请选择</option>"));
					$("#district").empty();
					$("#district").append($("<option value='0'>请选择</option>"));
				}else if(e=='3'){
					$("#district").empty();
					$("#district").append($("<option value='0' selected>请选择</option>"));
				}
				$(data.data).each(function(){
					if(e=='1'){
						if("${enterpriseList[0].city_id_1}"==this.name){
							parent_id=this.id;
							type="city";
							var $sele = $("<option value='"+this.id+"' selected='selected'>"+this.name+"</option>");
						}else{
							var $sele = $("<option value='"+this.id+"'>"+this.name+"</option>");
						}
						$("#province").append($sele);
					}if(e=='2'&&parent_id>0){
						if("${enterpriseList[0].city_id_2}"==this.name){
							parent_id=this.id;
							type="district";
							var $sele = $("<option value='"+this.id+"' selected='selected'>"+this.name+"</option>");
						}else{
							var $sele = $("<option value='"+this.id+"'>"+this.name+"</option>");
						}
						$("#city").append($sele);
					}if(e=='3'&&parent_id>0){
						if("${enterpriseList[0].city_id_3}"==this.name){
							var $sele = $("<option value='"+this.id+"' selected='selected'>"+this.name+"</option>");
						}else{
							var $sele = $("<option value='"+this.id+"'>"+this.name+"</option>");
						}
						$("#district").append($sele);
					}
                });
			}
			if(parent_id>0&&e=='1'&&type=="city"){
				e=e+1;
				$("#city").empty();
				city(parent_id,e);
				$("#district").empty();
			}
			if(parent_id>0&&e=='2'&&type=="district"){
				e=e+1;
				$("#district").empty();
				$("#district").append($("<option value='0' selected>请选择</option>"));
				city(parent_id,e);
			}
			
		});
 } 
 //行业联动
  $("#sshy").change(function(){
 	industryList2($(this).val());
 });  
 	//所属行业
 function industryList(parent_id){
	 $.post($base + '/enterprise/industryList',{
		 "parent_id":parent_id
	 },function(data){
			if(data.result>0){
				if(parent_id==0||parent_id==''){
					$("#sshy").empty();
					$("#suoshu").empty();
					$("#sshy").append($("<option value='0'>请选择</option>"));
					$("#suoshu").append($("<option value='0'>请选择</option>"));
				} 
				$(data.data).each(function(){
					if("${industry_id1}"==this.id){
						parent_id=this.id
						var $sele = $("<option value='"+this.id+"' selected='selected'>"+this.name+"</option>");
					}else{
						var $sele = $("<option value='"+this.id+"'>"+this.name+"</option>");
					}
					$("#sshy").append($sele);
                });
			}
			if(parent_id>0){
				industryList2(parent_id);
			}
		});
 }
	//所属行业子集
 function industryList2(parent_id){
	 $.post($base + '/enterprise/industryList',{
		 "parent_id":parent_id
	 },function(data){
			if(data.result>0){
				$("#suoshu").empty();
				$("#suoshu").append($("<option value='0'>请选择</option>"));
				$(data.data).each(function(){
					if(parent_id>0){
						if("${enterpriseList[0].industry_id}"==this.name){
							parent_id=this.id;
							var $sele = $("<option value='"+this.id+"' selected='selected'>"+this.name+"</option>");
						}else{
							var $sele = $("<option value='"+this.id+"'>"+this.name+"</option>");
						}
						$("#suoshu").append($sele);
					}
                });
			}
		});
 };
 //图片上传预览    IE是用了滤镜。
 function previewImage(file){
 	var filepath=$("#file1").val();
 	var extStart=filepath.lastIndexOf(".");
 	var ext=filepath.substring(extStart,filepath.length).toUpperCase();
 	if(ext!=".JPG"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPEG"){
 		layer.alert("请选择正确的图片格式", {icon: 0,skin: 'layer-ext-moon'});
 		$("#file1").val("");
			return;
 	}
     var MAXWIDTH  = 260;
     var MAXHEIGHT = 180;
     var div = document.getElementById('preview');
     if (file.files && file.files[0])
     {
         div.innerHTML ='<img id=imghead>';
         var img = document.getElementById('imghead');
         img.onload = function(){
             var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
             img.width  =  rect.width;
             img.height =  rect.height;
//              img.style.marginLeft = rect.left+'px';
             img.style.marginTop = rect.top+'px';
         }
         var reader = new FileReader();
         reader.onload = function(evt){
         	img.src = evt.target.result;
         }
         reader.readAsDataURL(file.files[0]);
     }
     else //兼容IE
     {
         var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
         file.select();
         var src = document.selection.createRange().text;
         div.innerHTML = '<img id=imghead>';
         var img = document.getElementById('imghead');
         img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
         var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
         status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
         div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
     }
 }
 function clacImgZoomParam( maxWidth, maxHeight, width, height ){
     var param = {top:0, left:0, width:width, height:height};
     if( width>maxWidth || height>maxHeight )
     {
         rateWidth = width / maxWidth;
         rateHeight = height / maxHeight;

         if( rateWidth > rateHeight )
         {
             param.width =  maxWidth;
             param.height = Math.round(height / rateWidth);
         }else
         {
             param.width = Math.round(width / rateHeight);
             param.height = maxHeight;
         }
     }

     param.left = Math.round((maxWidth - param.width) / 2);
     param.top = Math.round((maxHeight - param.height) / 2);
     return param;
 }
 
 //图片上传预览    IE是用了滤镜。
 function previewImaged(file){
 	var filepath=$("#yyzzz").val();
 	var extStart=filepath.lastIndexOf(".");
 	var ext=filepath.substring(extStart,filepath.length).toUpperCase();
 	if(ext!=".JPG"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPEG"){
 		layer.alert("请选择正确的图片格式", {icon: 0,skin: 'layer-ext-moon'});
 		$("#yyzzz").val("");
			return;
 	}
     var MAXWIDTH  = 260;
     var MAXHEIGHT = 180;
     var div = document.getElementById('previewd');
     if (file.files && file.files[0])
     {
         div.innerHTML ='<img id=imgheadd>';
         var img = document.getElementById('imgheadd');
         img.onload = function(){
             var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
             img.width  =  rect.width;
             img.height =  rect.height;
//              img.style.marginLeft = rect.left+'px';
             img.style.marginTop = rect.top+'px';
         }
         var reader = new FileReader();
         reader.onload = function(evt){img.src = evt.target.result;}
         reader.readAsDataURL(file.files[0]);
     }
     else //兼容IE
     {
         var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
         file.select();
         var src = document.selection.createRange().text;
         div.innerHTML = '<img id=imgheadd>';
         var img = document.getElementById('imgheadd');
         img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
         var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
         status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
         div.innerHTML = "<div id=divheadd style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
     }
 }
 function clacImgZoomParam( maxWidth, maxHeight, width, height ){
     var param = {top:0, left:0, width:width, height:height};
     if( width>maxWidth || height>maxHeight )
     {
         rateWidth = width / maxWidth;
         rateHeight = height / maxHeight;

         if( rateWidth > rateHeight )
         {
             param.width =  maxWidth;
             param.height = Math.round(height / rateWidth);
         }else
         {
             param.width = Math.round(width / rateHeight);
             param.height = maxHeight;
         }
     }

     param.left = Math.round((maxWidth - param.width) / 2);
     param.top = Math.round((maxHeight - param.height) / 2);
     return param;
 }
</script>
</body>
</html>